/* eslint-disable */
import React from 'react';
import Chart from 'echarts-for-react';
import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;
import echarts from 'echarts';
import styles from './MybarRight.less';
import request from '../../../utils/request';
// let data = {
//     time:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
//     value:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
// }
const style = {
    color: '#fff',
    marginLeft: '50%',
    position: 'absolute',
    zIndex: 100,
    fontSize: 12,
};
const factorList = ['六价铬', '镉', '铅', '铜', '砷', '汞', '锌', '镍', '铬'];
const factorCode = ['cr', 'cd', 'pb', 'cu', 'as_', 'hg', 'zn', 'ni', 'cr_'];

class MyLineRight extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activeKey: 'cr',
            dataList: '',
            tiesha: true
        };
    }
    componentDidMount() {


        // request({
        //     url: `/web/redstar/cockpitport/riverWaterQuality`,
        //     method: 'POST',
        //     data: { index: this.state.activeKey, riverway: this.state.tiesha ? '贴沙河' : '新开河' }

        // }).then(data => {
        //     let dataList = data.ret;

        //     this.setState({
        //         dataList
        //     })
        //     this.changeKey = setInterval(() => {
        //         let nowKey = factorCode.indexOf(this.state.activeKey);
        //         let newKey;
        //         if (nowKey < 8) {
        //             newKey = factorCode[nowKey + 1];
        //         } else {
        //             newKey = factorCode[0];
        //         }
        //         this.onTabClick(newKey);
        //         this.setState({
        //             activeKey: newKey
        //         })
        //     }, 10000);
        // })



    }
    // componentWillUnmount() {
    //     clearTimeout(this.changeKey)
    // }
    // onTabClick = (key) => {
    //     request({
    //         url: `/web/redstar/cockpitport/riverWaterQuality`,
    //         method: 'POST',
    //         data: { index: key, riverway: this.state.tiesha ? '贴沙河' : '新开河' }

    //     }).then(data => {
    //         // console.log(data)
    //         let dataList = data.ret;
    //         this.setState({
    //             activeKey: key,
    //             dataList
    //         })
    //     })
    // };

    onBtn = (v) => {
        this.setState({
            tiesha: v
        })

    }

    setOption = () => {
        let myOption;
        let data = this.state.dataList;
        var fontColor = '#30eee9';
        myOption = {
            // backgroundColor:'#11183c',
            grid: {
                top: '35%',
                left: '10%',
                right: '12%',
                bottom: '8%',
                containLabel: true
            },
            tooltip: {
                show: true,
                trigger: 'item'
            },
            legend: {
                show: true,
                x: 'center',
                y: '35',
                // icon: 'stack',
                // itemWidth:10,
                // itemHeight:10,
                textStyle: {
                    color: '#1bb4f6'
                },
                data: ['已采纳', '已发布', '浏览量']
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        color: '#C9C9C9'
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#397cbc'
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#195384'
                        }
                    },
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '水(t)',
                  
                    position: 'right',
                    axisLine: {
                        lineStyle: {
                            color: '#C9C9C9'
                        }
                    },
                    splitLine:{lineStyle:{color:'#063436',type:'dashed'}},
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                {
                    type: 'value',
                    name: '电(kW·h)',
                
                    position: 'right',
                    offset: 50,
                    axisLine: {
                        lineStyle: {
                            color: '#C9C9C9'
                        }
                    },
                    splitLine:{lineStyle:{color:'#063436',type:'dashed'}},
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                {
                    type: 'value',
                    name: '天然气(m³)',
                    // offset: -10,
                    position: 'left',
                    axisLine: {
                        lineStyle: {
                            color: '#C9C9C9'
                        }
                    },
                    splitLine:{lineStyle:{color:'#063436',type:'dashed'}},
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            series: [
                {
                    name: '已采纳',
                    type: 'line',
                    stack: '总量',
                    symbol: 'circle',
                    symbolSize: 5,
                    itemStyle: {
                        normal: {
                            color: '#0092f6',
                            lineStyle: {
                                color: "#0092f6",
                                width: 1
                            },
                            areaStyle: {
                                //color: '#94C9EC'
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(7,44,90,0.3)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,146,246,0.9)'
                                }]),
                            }
                        }
                    },
                    markPoint: {
                        itemStyle: {
                            normal: {
                                color: 'red'
                            }
                        }
                    },
                    data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
                },
                {
                    name: '已发布',
                    type: 'line',
                    stack: '总量',
                    symbol: 'circle',
                    symbolSize: 5,

                    itemStyle: {
                        normal: {
                            color: '#00d4c7',
                            lineStyle: {
                                color: "#00d4c7",
                                width: 1
                            },
                            areaStyle: {
                                //color: '#94C9EC'
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(7,44,90,0.3)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,212,199,0.9)'
                                }]),
                            }
                        }
                    },
                    data: [220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410]
                },
                {
                    name: '浏览量',
                    type: 'line',
                    stack: '总量',
                    symbol: 'circle',
                    symbolSize: 5,
                    itemStyle: {
                        normal: {
                            color: '#aecb56',
                            lineStyle: {
                                color: "#aecb56",
                                width: 1
                            },
                            areaStyle: {
                                //color: '#94C9EC'
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(7,44,90,0.3)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(114,144,89,0.9)'
                                }]),
                            }
                        }
                    },
                    data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190]
                }
            ]
        };
        return myOption;
    };
    render() {

        return (
            <div className={styles.Tabs} style={{ width: "100%", height: "110%", position: 'relative' }}>
                <div style={{ color: '#fff', position: 'absolute', top: '-20px', right: 15, zIndex: 15 }}>
                    <span className={styles.titleBtn1} style={{ backgroundImage: `url(${this.state.tiesha ? require('../../../assets/tabBtn.png') : ''})` }} onClick={this.onBtn.bind(this, true)}>一周</span>
                    <span style={{ backgroundImage: `url(${!this.state.tiesha ? require('../../../assets/tabBtn.png') : ''})` }} className={styles.titleBtn1} onClick={this.onBtn.bind(this, false)}>一个月</span>
                    <span style={{ backgroundImage: `url(${!this.state.tiesha ? require('../../../assets/tabBtn.png') : ''})` }} className={styles.titleBtn1} onClick={this.onBtn.bind(this, false)}>三个月</span>
                </div>

                <Chart
                    option={this.setOption()}
                    notMerge
                    lazyUpdate
                    style={{ height: "90%" }}
                />

            </div>
        )
    }
}
export default MyLineRight;
